<template>
	<view v-if="pageShow" class="container">
		<view class="header">
			<view class="header-status">
				<text>{{orderObj.status===0?'待付款':orderObj.status===1?'服务中···':orderObj.status===2?'待确认':orderObj.status===5?'订单已关闭':'已完成'}}</text>
				<view v-if="orderObj.status===0" class="header-count">
					<count-down :end-time="orderObj.createtime + 1800" :title-color="titleColor"></count-down>
				</view>
			</view>
		</view>
		<view class="float-content">
			<view class="content">
				<text
					class="status-name">{{orderObj.status===0?'待付款':orderObj.status===1?'服务中':orderObj.status===2?'待确认':orderObj.status===5?'交易失败':'已完成'}}</text>
				<text
					class="status-des">{{orderObj.status===0?'您已经成功提交订单，订单未支付':orderObj.status===1?'该订单正在服务当中':orderObj.status===2?'请您验收服务':orderObj.status===5?'该订单已关闭':'该订单已服务完成'}}</text>
			</view>
		</view>
		<view class="shop-detail">
			<view class="shop-img">
				<image :src="pic[0]" mode="aspectFill" class="img"></image>
			</view>
			<view class="shop-info">
				<text class="shop-name">{{shopObj.name}}</text>
				<text class="shop-price">¥ {{shopObj.price}}</text>
			</view>
		</view>
		<view class="true-price">
			<view class="old-price">
				<text>服务金额</text>
				<text>{{shopObj.price==0?'面议':'¥' + shopObj.price}}</text>
			</view>
			<view class="new-price">
				<text>{{orderObj.status===0 || orderObj.status===5?'未支付':'实付款'}}</text>
				<text style="color: #FF6161;">¥ {{orderObj.money}}</text>
			</view>
		</view>
		<view class="order-info">
			<view class="order-top">
				<text>订单信息</text>
				<view class="top-right" @click="goContact()">
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/personal/contact-service.png"
						class="contact-icon"></image>
					<text style="margin-left: 10rpx;">在线沟通</text>
				</view>
			</view>
			<view class="order-middle">
				<text style="color: #999;">服务方：</text>
				<text style="color: #333;">{{serviceObj.name}}</text>
			</view>
			<view class="order-bottom">
				<text style="color: #999;">交易时间：</text>
				<text style="color: #333;">{{orderObj.createtime_text}}</text>
			</view>
			<view class="order-bottom">
				<text style="color: #999;">订单号：</text>
				<view class="bottom-right">
					<text style="color: #333;margin-right: 10rpx;">{{orderObj.order_no}}</text>
					<image
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/personal/copy-orderNo.png"
						class="copy-img" @click="copyOrder"></image>
				</view>
			</view>
		</view>
		<view v-if="userInfo.id == orderObj.user_id">
			<view v-if="orderObj.status===0 || orderObj.status===2 || orderObj.status===5" class="bottom-btn">
				<view v-if="orderObj.status === 0 || orderObj.status === 5" class="btn-del" @click="delOrder(orderObj)">
					{{orderObj.status===0?"取消订单":"删除订单"}}
				</view>
				<view class="flex-end">
					<view class="btn-detail" :class="orderObj.status===0?'now-buy':'go-buy'" @click="goBuyShop(orderObj)">
						{{orderObj.status===0?"立即支付":orderObj.status===2?"确认验收":'重新购买'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import shopApi from '@/api/shopDetail.js'
	import CountDown from "@/components/countDown/countDown.vue";
	export default {
		components: {
			CountDown
		},
		data() {
			return {
				orderObj: {},
				orderNo: null,
				//服务商
				serviceObj: {},
				//商品
				shopObj: {},
				pageShow: false,
				pic: [],
				titleColor: '#fff',
				
				userInfo: {}
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo
			this.getDetail()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			//获取订单详情
			async getDetail() {
				let res = await orderApi.getOrderView({
					order_no: this.orderNo
				})
				if (res.code === 1) {
					this.orderObj = res.data
					this.getShopDetail(res.data.shop_id)
					this.pageShow = true
				} else {
					this.$common.msgShow(res.msg)
				}
			},


			//获取订单商品详情
			async getShopDetail(id) {
				let res = await shopApi.getShopDetail({
					id: id
				})
				if (res.code === 1) {
					this.shopObj = res.data.info
					this.pic = res.data.info.pic.split(',')
					this.serviceObj = res.data.service_info
				} else {
					this.$common.msgShow(res.msg)
				}
			},

			//删除订单
			delOrder(val) {
				if(val.status === 0) {
					this.closeOrder(val)
				}else {
					let id = val.id
					let that = this
					uni.showModal({
						title: '温馨提示',
						confirmText: '确认删除',
						confirmColor: "#0177FD",
						cancelColor: '#999',
						cancelText: '再想想',
						content: '确认删除此订单吗？',
						success: function(res) {
							if (res.confirm) {
								orderApi.delOrder({
									order_id: id
								}).then(ots => {
									if (ots.code === 1) {
										that.$common.msgShow('删除成功')
										that.$common.pageBack()
									} else {
										that.$common.msgShow(ots.msg)
									}
								})
							}
						}
					})
				}
			},
			
			closeOrder(val) {
				let id = val.id
				let that = this
				uni.showModal({
					title: '温馨提示',
					confirmText: '确认取消',
					confirmColor: "#0177FD",
					cancelColor: '#999',
					cancelText: '再想想',
					content: '确认取消此订单吗？',
					success: function(res) {
						if (res.confirm) {
							orderApi.closeOrder({
								id: id
							}).then(ots => {
								if (ots.code === 1) {
									that.$common.msgShow('取消成功')
									that.$common.pageBack()
								} else {
									that.$common.msgShow(ots.msg)
								}
							})
						}
					}
				})
			},

			//重新购买商品
			goBuyShop(val) {
				if (val.status === 0) {
					uni.navigateTo({
						url: '/pagesOrder/payOrder/payOrder?orderNo=' + val.order_no
					})
				} else if (val.status === 2) {
					let that = this
					uni.showModal({
						title: '温馨提示',
						confirmColor: '#0177FD',
						confirmText: '确认验收',
						cancelColor: '#999',
						cancelText: '再想想',
						content: '是否确认验收服务',
						success: function(ots) {
							if (ots.confirm) {
								orderApi.sureOrder({
									order_id: val.id,
									status: 3
								}).then(res => {
									if (res.code === 1) {
										that.$common.msgShow('验收成功')
										that.$common.pageBack(1)
									} else {
										that.$common.msgShow(ots.msg)
									}
								})
							}
						}
					})
				} else {
					uni.redirectTo({
						url: '/pagesShop/shopDetail/shopDetail?id=' + this.shopObj.id
					})
				}
			},

			//复制订单号
			copyOrder() {
				uni.setClipboardData({
					data: this.orderNo,
					success: function() {
						this.$common.msgShow('复制成功')
					}
				})
			},

			//跳转服务商咨询
			goContact() {
				if (!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				if(uni.getStorageSync('userInfo').id == this.serviceObj.user_id) {
					this.$common.msgShow('您不能与自己沟通')
					return
				}
				uni.setStorageSync("to_zim_userid", this.serviceObj.user_id);
				uni.navigateTo({
					url: '/pages/message/chat?id=' + this.serviceObj.user_id
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import 'orderDetail.scss';

	/deep/ .u-count-down__text {
		color: #fff !important;
	}
</style>